<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"  
      xmlns:c="http://java.sun.com/jsp/jstl/core">  

    <ui:composition template="layout.xhtml">
        <ui:define name="corpo">

            <!--            <h1 style="font-size: 18px;">Protocolo</h1>-->
            <h:form>
                <div id="breadcrumb">
                    <p:commandLink  actionListener="#{managerIndex.redirect('index.xhtml')}" value="Inicio" update="@form" immediate="true"/> >
                    <p:commandLink  actionListener="#{managerIndex.redirect('indexProtocolo.xhtml')}" value="Protocolo" update="@form" immediate="true"/> > 
                    <p:commandLink  value="Cadastrar" update="@form" immediate="true"/>
                </div>
            </h:form>
            <p:tabView dynamic="true" id="tabView">  
                <p:tab id="tab1" title="Protocolo">                  
                    <h:form id="protocolo" acceptcharset="utf-8"> 

                        <p:messages id="msg" autoUpdate="true"/>
                        <div style="text-align: right;">
                            <h:outputLabel value="Protocolo ##{managerProtocolo.protocolo.id}"
                                           rendered="#{managerProtocolo.protocolo.id eq 0 ? false : true}"/>
                        </div>
                        <fieldset>
                            <legend>Dados</legend> 
                            <h:panelGrid columns="5" id="panel"  styleClass="textAlignRight" columnClasses="textAlignRight"> 

                                <h:outputLabel value="Interessado: "/>
                                <p:inputText id="interessado"  
                                             value="#{managerProtocolo.pessoa.nome}" 
                                             style="width: 769px;" required="true"
                                             requiredMessage="Campo Interessado é obrigatório"/>

                                <!--                                <p:commandButton icon="ui-icon-search" actionListener="{managerOrcamento.buscarPessoa()}"
                                                                                 update="msg, @this,  interessado " process="@this" style="margin-left: -5px;"/>-->

                                <p:commandButton icon="ui-icon-circle-plus" onclick="dlg.show();" 
                                                 type="button" style="margin-left: -5px;" update=":j_idt100:buscar_form"/>




                            </h:panelGrid>

                            <br/>
                        </fieldset>
                        <fieldset>
                            <legend>Serviço</legend> 
                            <h:panelGrid columns="2" id="panelServico"  styleClass="textAlignRight" columnClasses="textAlignRight"> 
                                <h:outputLabel  value="Ato:" />
                                <p:autoComplete id="atoItem" effect="blind" value="#{managerProtocolo.servicoProtocolo.atoItem}" 
                                                scrollHeight="200" completeMethod="#{managerAto.completeAtoItem}"  
                                                size="106" var="p" itemLabel="#{p.sigla.concat(' - ')}#{p.descricao}" 
                                                forceSelection="true" itemValue="#{p}" converter="atoItemConverter"  
                                                converterMessage="Erro, verifique o Ato Item" minQueryLength="3" 
                                                dropdown="true" required="true" requiredMessage="O campo 'Ato Item' é obrigatório"> 
                                    <p:ajax event="itemSelect" listener="#{managerProtocolo.gerarCampos}" update="panelCampos"/>                                        

                                </p:autoComplete>
                            </h:panelGrid>

                            <h:panelGrid columns="2"  width="950" id="panelCampos" style="margin-top: 5px;" > 
                                <ui:repeat id="rptCampos" value="#{managerProtocolo.listPC}" 
                                           rendered="#{! empty managerProtocolo.listPC}" 
                                           var="orc" >
                                    <p:row>                                          
                                        <h:outputLabel  value="#{orc.atoCampo.nome}: " /> 
                                        <p:inputText  value="#{orc.valor}" rendered="#{orc.atoCampo.tipo.equalsIgnoreCase('Integer')}" onkeypress="jQuery(this).autoNumeric({aSep: '.', aDec: ','} );" required="true" requiredMessage="Campo obrigatório"/>
                                        <p:inputText  value="#{orc.valor}" rendered="#{orc.atoCampo.tipo.equalsIgnoreCase('BigDecimal')}" onkeypress="jQuery(this).autoNumeric({aSep: '.', aDec: ','} );" required="true" requiredMessage="Campo obrigatório"/>
                                        <p:inputText  value="#{orc.valor}" rendered="#{orc.atoCampo.tipo.equalsIgnoreCase('String')}" required="true" requiredMessage="Campo obrigatório"/> 

                                    </p:row> 
                                </ui:repeat>

                            </h:panelGrid>
                            <div class="buttonAction">
                                <p:commandButton icon="ui-icon-circle-plus" value="Adicionar" 
                                                 actionListener="#{managerProtocolo.addServico()}" 
                                                 update="@this, msg, atoItemTable, panelCampos, panelServico, panelObs"
                                                 process="@this, panelCampos, panelServico" style="float: right;"/>
                                <p:commandButton icon="ui-icon-circle-close" value="Limpar" 
                                                 actionListener="#{managerProtocolo.reinit()}" 
                                                 update="panelServico, panelCampos" process="@this"
                                                 style="float: right;"/>
                            </div>   

                        </fieldset>
                        <br/>

                        <h:panelGrid id="dataTableAtoItem">
                            <p:dataTable var="serv" id="atoItemTable" 
                                         value="#{managerProtocolo.listSP}"
                                         rowIndexVar="rowid" style="width:970px;" 
                                         rows="8"
                                         rowKey="#{serv.id}" selectionMode="single" 
                                         emptyMessage="Nenhum Serviço Cadastrado" 
                                         paginatorPosition="bottom" paginator="true"
                                         paginatorTemplate="{PageLinks}"  
                                         >  
                                <f:facet name="header">
                                    Serviços Protocolo
                                </f:facet>
                                <p:column headerText="" style="width: 65px">  
                                    <p:commandButton  style="width: 20px; height: 20px;" onclick="editeProtocoloAto({paramProAto:#{rowid}})" icon="ui-icon-pencil" process="@this" title="Editar" />
                                    <p:commandButton  style="width: 20px; height: 20px;" onclick="showProtocoloAto({paramShowProAto:#{rowid}})" icon="ui-icon-search" process="@this" title="Visualizar"/>
                                    <p:commandButton  style="width: 20px; height: 20px;" onclick="removeProtocoloAto({paramRemoverProAto:#{rowid}})" icon="ui-icon-trash" process="@this" update="@this" immediate="true" title="Remover"/>

                                </p:column>
                                <p:column headerText="Ato"  >  
                                    <h:outputText value="#{serv.atoItem.codigo} - #{serv.atoItem.descricao}" />  
                                </p:column>
                                <p:column headerText="Prazo" style="width:100px">  
                                    <h:outputText value="#{serv.atoItem.prazo}" style="float: right;" />  
                                </p:column>
                                <p:column headerText="Cartório" style="width:100px">  
                                    <h:outputText value="#{serv.valorCartorio}" style="float: right;" > 
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>
                                </p:column>
                                <p:column headerText="Fermojupi" style="width:100px">  
                                    <h:outputText value="#{serv.valorFermojupi}" style="float: right;" > 
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>
                                </p:column>
                                <p:column headerText="Valor R$"  style="width:128px;">  
                                    <h:outputText value="#{serv.valor}" styleClass="teste" style="float: right;" >
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>
                                </p:column>
                            </p:dataTable> 
                            <p:remoteCommand name="editeProtocoloAto"
                                             update="msg, atoItemTable, panelServico, panelCampos, panelObs" 
                                             process="@this" immediate="true" 
                                             actionListener="#{managerProtocolo.editarList()}">
                            </p:remoteCommand>
                            <p:remoteCommand name="removeProtocoloAto"
                                             update="atoItemTable, panelObs" process="@this" 
                                             actionListener="#{managerProtocolo.remove()}">
                            </p:remoteCommand>
                            <p:remoteCommand name="showProtocoloAto"
                                             update="msg, atoItemTable, servico, panelCamposVisualizar" 
                                             immediate="true" process="@this" oncomplete="servicoAtoProt.show()" 
                                             actionListener="#{managerProtocolo.showDialog()}">
                            </p:remoteCommand>
                        </h:panelGrid>
                        <br/>

                    <h:outputLabel value="Observação: "/>

                        <h:panelGrid columns="3" 
                                     id="panelObs" styleClass="textAlignRight" 
                                     style="width: 100%"> 

                            <p:inputTextarea value="#{managerProtocolo.protocolo.obs}"
                                             cols="85" style="width: 365px;" rows="5" maxlength="500" />       
                            
                            <h:panelGrid columns="2"  styleClass="textAlignRight" 
                                         columnClasses="textAlignRight"  style="width: 30%">
                                <h:outputLabel value="Cartório: "/>
                                <p:row>
                                    <p:inputText id="totalCartorio" value="#{managerProtocolo.sumCartorio}" readonly="true"  
                                                 style="width: 183px; text-align: right"
                                                 onchange="jQuery(this).autoNumeric({aSep: '.', aDec: ','} );">
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </p:inputText>

                                </p:row>
                                <h:outputLabel value="Fermojupi: " />
                                <p:row>
                                    <p:inputText id="totalFermojupi" readonly="true" 
                                                 style="width: 183px; text-align: right" 
                                                 value="#{managerProtocolo.sumFermojupi}"
                                                 onchange="jQuery(this).autoNumeric({aSep: '.', aDec: ','} );">
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </p:inputText>
                                </p:row>
                                <h:outputLabel value="Total: "/>   
                                <p:row>
                                    <p:inputText id="totalGeral" readonly="true" 
                                                 value="#{managerProtocolo.sumTotal}"
                                                 style="width: 183px; color:#3B5998; font-weight: bold; text-align: right"
                                                 onchange="jQuery(this).autoNumeric({aSep: '.', aDec: ','} );">
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </p:inputText>

                                </p:row>
                            </h:panelGrid>

                            <h:panelGrid columns="2" id="pag" styleClass="textAlignRight"
                                         columnClasses="textAlignRight" >

                                <h:outputLabel value="Forma de Pag.: " style="width: 90px;"/>
                                <p:selectOneMenu value="#{managerProtocolo.protocolo.formasPagamento}"  
                                                 label="Tipo " style="width: 183px" onchange="">  
                                    <f:selectItems value="#{managerProtocolo.selectItemFormPag()}"  />
                                    <p:ajax event="change"  update="@form" listener="#{managerProtocolo.verificaPag()}"/>
                                </p:selectOneMenu> 
                                
                                <h:outputLabel value="Recebido: " rendered="#{!managerProtocolo.parc}" style="width: 83px;"/>
                                <p:row rendered="#{!managerProtocolo.parc}">
                                    <p:inputText id="recebido" rendered="#{!managerProtocolo.parc}" 
                                                 value="#{managerProtocolo.recebido}" required="true" requiredMessage="Informe o Valor Recebido"
                                                 style="width: 183px; text-align: right" onkeypress="jQuery(this).autoNumeric({aSep: '.', aDec: ','} );">
                                        <p:ajax event="keyup" update="troco" listener="#{managerProtocolo.caixa()}" />  
                                        <p:ajax event="change" update="troco" listener="#{managerProtocolo.caixa()}" />  
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </p:inputText> 
                                </p:row>
                                <h:outputLabel value="Troco: " rendered="#{!managerProtocolo.parc}" />
                                <p:row rendered="#{!managerProtocolo.parc}">
                                    <p:inputText rendered="#{!managerProtocolo.parc}" value="#{managerProtocolo.troco}" id="troco"
                                                 style="width: 183px; text-align: right" 
                                                 readonly="true"
                                                 onchange="jQuery(this).autoNumeric({aSep: '.', aDec: ','} );">
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </p:inputText>
                                </p:row>
                           
                                <h:outputLabel value="Quantidade. " style="width: 85px;" 
                                               rendered="#{managerProtocolo.parc}"/>
                                
                                <p:inputText id="qtd" rendered="#{managerProtocolo.parc}"
                                             value="#{managerProtocolo.qtdParc}" 
                                              required="true" requiredMessage="Informe a Quantidade de Parcela"
                                                 style="width: 183px; text-align: right" />

                                <h:outputLabel value="Entrada: "  style="width: 83px;" rendered="#{managerProtocolo.parc}"/>
                                <p:row id="rowPag" rendered="#{managerProtocolo.parc}">
                                    <p:inputText rendered="#{managerProtocolo.parc}" 
                                                  required="true" requiredMessage="Informe o Valor da Entrada"
                                                 value="#{managerProtocolo.entrada}" onkeypress="jQuery(this).autoNumeric({aSep: '.', aDec: ','} );"
                                                 style="width: 183px; text-align: right" 
                                       >
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </p:inputText> 
                                </p:row>
                            </h:panelGrid>
                        </h:panelGrid>
                    <div class="buttonAction">
                            <p:commandButton icon="ui-icon-plusthick" value="Novo" actionListener="#{managerProtocolo.init()}" update="@form" process="@this"/>
                            <p:commandButton icon="ui-icon-disk" value="Salvar" actionListener="#{managerProtocolo.salvar()}" 
                                             update="@form" process="@this, panel, panelObs"/>
                             <p:commandButton icon="ui-icon-print" value="Imprimir" 
                                             action="#{managerProtocolo.relatorioProtocoloRecibo()}"
                                             onclick="this.form.target='_blank'"
                                             disabled="#{managerProtocolo.protocolo.id eq 0 ? true : false}" 
                                             ajax="false" immediate="true" update="@form" process="@this"/>
                           

                            <center>
                                <p:ajaxStatus style="width:16px;height:16px;" >  
                                    <f:facet name="start">  
                                        <h:graphicImage value="/media/img/loading.gif" />  
                                    </f:facet>  
                                    <f:facet name="complete">  
                                        <h:outputText value="" />  
                                    </f:facet>  
                                </p:ajaxStatus>
                            </center>
                        </div>
                        <p:dialog id="servicoAto" modal="true" header="Serviço" widgetVar="servicoAtoProt" resizable="false"  
                                  width="450" minHeight="400" showEffect="slide" hideEffect="fold" >
                            
                            <h:panelGrid id="servico"   columns="2" styleClass="textAlignRight" columnClasses="textAlignRight">

                                <h:outputLabel value="Cód.: " style="font-weight: bold;"/>
                                <h:outputText value="#{managerProtocolo.spVisualizar.atoItem.id}"/>
                                <h:outputLabel value="Descrição.: " style="font-weight: bold;"/>
                                <h:outputText value="#{managerProtocolo.spVisualizar.atoItem.descricao}"/>



                            </h:panelGrid>
                            <h:panelGrid columns="1"  id="panelCamposVisualizar" > 
                                <table >
                                    <ui:repeat id="rptCamposVisualizar" value="#{managerProtocolo.spVisualizar.protocoloCampos}" 
                                               rendered="#{! empty managerProtocolo.spVisualizar.protocoloCampos}" 
                                               var="orcVer" >
                                        <tr >
                                            <td class="textAlignRight" style="width:29px; margin-left: 0px" >
                                                <h:outputLabel  value="#{orcVer.atoCampo.nome}: " style="font-weight: bold;"/> 
                                            </td>
                                            <td>
                                                <h:outputText  value="#{orcVer.valor}" rendered="#{orcVer.atoCampo.tipo.equalsIgnoreCase('Integer')}" />
                                                <h:outputText  value="#{orcVer.valor}" rendered="#{orcVer.atoCampo.tipo.equalsIgnoreCase('BigDecimal')}"  />
                                                <h:outputText  value="#{orcVer.valor}" rendered="#{orcVer.atoCampo.tipo.equalsIgnoreCase('String')}" /> 
                                            </td>
                                        </tr>
                                    </ui:repeat>
                                </table>
                            </h:panelGrid>
                        </p:dialog>

                    </h:form>

                </p:tab>
            </p:tabView>
            <p:dialog header="Interessado" widgetVar="dlg" modal="true">
                <p:ajax event="close" update=":tabView:protocolo:interessado"/>
                <ui:include src="criarPessoaInProtocolo.xhtml"  />
            </p:dialog>
        </ui:define>
    </ui:composition>

</html>